<template >
  <div>
    <el-container>
      <el-header>
        <el-header>
          <el-button class="btn" type="primary" size="default" @click="Login"
            >退出登录</el-button
          >
        </el-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :router="true"
            unique-opened
            style="height: 690px"
            default-active="/main/user"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu
              :index="item.menuId"
              v-for="item in menuData"
              :key="item.menuId"
            >
              <template slot="title"> {{ item.menuName }} </template>
              <el-menu-item-group
                v-for="items in item.child"
                :key="items.menuId"
              >
                <el-menu-item :index="items.menuUrl">{{
                  items.menuName
                }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-main>
            <router-view />
          </el-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuData: [],
    };
  },

  methods: {
    Login() {
      this.$router.push("/login");
    },

    MenuList() {
      this.axios.get("https://localhost:44366/api/Menu/Query").then((res) => {
        this.menuData = res.data.data;
      });
    },
  },

  created() {
    this.MenuList();
  },
};
</script>
<style >
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
.btn {
  float: right;
  margin-top: 10px;
}
</style>